<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/index.css" />
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
<script src="../dist/index.js"></script>
<script>
    console.log(V3Components)
    const app = window.Vue.createApp({
      template: `
        <div>
        <pl-button label="label"></pl-button>
        <pl-button @click="outerFocus">插槽内容</pl-button>
        <pl-input />
        <pl-input status="error" ref="myInput" />
      </div>
      `,
      setup() {
        const inputRef = window.V3Components.Input.use.ref('myInput')
        return {
          outerFocus() {
            inputRef.value.methods.focus(false)
          }
        }
      }
    })
    app.use(window.V3Components)
    app.mount('#app')
</script>
</body>
</html>
